<template>
  <el-dialog
    v-model="dialogVisible"
    title="余额充值"
    width="600px"
    @before-ok="saveOk"
    @close="close(formRef)"
  >
    <div class="ml30 mr30">
      <el-form
        :model="formModel"
        ref="formRef"
        :rules="formRules"
        label-width="120px"
        size="default"
      >
        <el-form-item label="当前余额：">
          <div class="fz14 fw ml5 text-red">{{ balance }}</div>
        </el-form-item>
        <el-form-item label="充值方式：" prop="mode">
          <el-radio-group v-model="formModel.mode">
            <el-radio label="inc">增加</el-radio>
            <el-radio label="dec">减少</el-radio>
            <el-radio label="final">最终余额</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="变更金额：" prop="money">
          <el-input type="number" v-model="formModel.money">
            <template #suffix>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="备注说明：" prop="remark">
          <el-input type="textarea" v-model="formModel.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="flex center">
        <el-button @click="close(formRef)">取消</el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          :disabled="btnLoading"
          @click="saveOk(formRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
  
<script lang="ts">
export default {
  name: "userRechargeBalance",
};
</script>

<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import { FormRules, FormInstance } from "element-plus";
import { Result, ResultError } from "@/types";
import { setUserRechargeBalance } from "@/api/user/index";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const dialogVisible = ref<boolean>(false);

type modeType = "inc" | "dec" | "final";

const formModel = ref<{
  mode?: modeType;
  money?: string;
  remark?: string;
}>({
  mode: "inc",
  money: "",
  remark: "",
});

const uid = ref<number | string>(0);

const balance = ref<number | string>(0.0);

const moneyValid = (rule: any, value: any, callback: any) => {
  if (Number(formModel.value.money) <= 0) {
    callback("金额必须大于0!");
  } else {
    callback();
  }
};
const formRules = reactive<typeof FormRules>({
  money: [
    { required: true, message: "金额不能为空！", trigger: "blur" },
    { validator: moneyValid, trigger: "blur" },
  ],
});

const btnLoading = ref<boolean>(false);

const formRef = ref<HTMLElement>();

const saveOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      setUserRechargeBalance(
        Object.assign(
          {
            id: uid.value,
          },
          formModel.value
        )
      )
        .then((res: Result) => {
          $utils.successMsg(res.message);
          close(formEl);
          emit("success");
          btnLoading.value = false;
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          btnLoading.value = false;
        });
    }
  });
};

const open = (id: number | string, money: string | number) => {
  uid.value = id;
  balance.value = money;
  dialogVisible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  uid.value = 0;
  balance.value = 0.0;
  dialogVisible.value = false;
};

defineExpose({ open, close });
</script>
